<template>
  <div >
    <el-row :gutter="36" >
      <el-col :span="6" >
        <div class="bgWhite" style="padding: 15px;padding-bottom: 14px">
          <div class="smallTitle">执法事项</div>
          <div class="bigNum">
            {{lawData.totalNum|formatNum}}
            <span style="font-size: 20px;line-height: 0;">条</span>
          </div>
          <div class="smallTitle">周同比<span class="ml15">{{lawData.weekSyncPop}}</span></div>
          <div class="smallTitle">日同比<span class="ml15">{{lawData.daySyncPop}}</span></div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">今日新增    <span class="ml15">{{lawData.lastDayIncr}}条</span></div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 15px;padding-bottom: 14px">
          <div class="smallTitle">办理事项</div>
          <div class="bigNum">
            {{matterData.totalNum|formatNum}}
            <span style="font-size: 20px;line-height: 0;">条</span>
          </div>
          <div class="smallTitle">周同比<span class="ml15">{{matterData.weekSyncPop}}</span></div>
          <div class="smallTitle">日同比<span class="ml15">{{matterData.daySyncPop}}</span></div>
          <hr style="margin: 17px 0">
          <div class="smallTitle">今日新增    <span class="ml15">{{matterData.lastDayIncr}}条</span></div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 15px;padding-bottom: 14px">
          <div class="smallTitle">综合执法局权责事项</div>
          <div class="bigNum">
            {{law1Num}}
            <span style="font-size: 20px;line-height: 0;">条</span>
          </div>
            <div id="chart1" style="height: 90px;width: 100%"></div>
          <hr style="margin:0 0 17px 0">
          <div class="smallTitle">预留数据</div>
        </div>
      </el-col>

      <el-col :span="6" >
        <div class="bgWhite" style="padding: 15px;padding-bottom: 14px">
          <div class="smallTitle">市场监管局权责事项</div>
          <div class="bigNum">
            {{law2Num}}
            <span style="font-size: 20px;line-height: 0;">条</span>
          </div>
          <div id="chart2" style="height: 90px;width: 100%"></div>
          <hr style="margin:0 0 17px 0">
          <div class="smallTitle">预留数据</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="36" >
      <el-col :span="24">
        <div class="bgWhite" style="margin-top: 36px">
          <div class="subTitle">执法事项数据</div>
          <div class="myTable">
            <el-table :data="lawTable" :show-header="true"  :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
              <el-table-column  label="工单编号" width="240px">
                <template slot-scope="scope">
                  <el-link type="primary"  class="caseDetail" @click="showDetail(scope.row)">{{scope.row.gdbh}}</el-link>
                </template>
              </el-table-column>
              <el-table-column label="业务建立时间" width="260px" >
                <template slot-scope="scope"  >
                  {{scope.row.bizCreateTime}}
                </template>
              </el-table-column>
              <el-table-column label="处置部门" :show-overflow-tooltip="true">
                <template slot-scope="scope"  >
                  {{scope.row.deptname}}
                </template>
              </el-table-column>
              <el-table-column label="大类" width="180px">
                <template slot-scope="scope"  >
                  {{scope.row.mainent}}
                </template>
              </el-table-column>
              <el-table-column label="小类" >
                <template slot-scope="scope"  >
                  {{scope.row.minorent}}
                </template>
              </el-table-column>
              <el-table-column label="事部件类型" width="180px">
                <template slot-scope="scope"  >
                  {{scope.row.sbjlx}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="36" >
      <el-col :span="24">
        <div class="bgWhite" style="margin-top: 36px">
          <div class="subTitle">办理事项数据 </div>
          <div class="myTable">
            <el-table :data="matterTable" class="mt20" :show-header="true"  :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
              <el-table-column  label="事项超期" width="120px" align="center">
                <template slot-scope="scope">
                  <!-- 1 正常 2预警 5超期-->
                  <i class="flagCircle" :class="scope.row.warningStatus=='1'?'green':'red'">&nbsp;</i>
                </template>
              </el-table-column>
              <el-table-column label="受理代码"  prop="processNo">  </el-table-column>
              <el-table-column label="事项名称" width="240px" prop="itemName" ></el-table-column>
              <el-table-column label="申请人" width="220px" prop="applyName" ></el-table-column>
              <el-table-column label="申请渠道" width="140px" prop="channel"></el-table-column>
              <el-table-column label="申请时间" width="200px" prop="applyDate"></el-table-column>
              <el-table-column label="是否受理" width="150px">
                <template slot-scope="scope">
                  {{scope.row.processStatus==20?'已受理':'未受理'}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title=""  width="80%" :fullscreen=false class="fullDialog" :visible.sync="dialogTableVisible">
      <el-row>
        <el-col :span="11" :offset="1">
          <table class="myTable">
            <tr><td>工单编号</td><td>{{dataDetail.gdbh}}</td></tr>
            <tr><td>受理类型</td><td>{{dataDetail.accepttype}}</td></tr>
            <tr><td>大类</td><td>{{dataDetail.mainent}}</td></tr>
            <tr><td>小类</td><td>{{dataDetail.minorent}}</td></tr>
            <tr><td>事部件类型</td><td>{{dataDetail.sbjlx}}</td></tr>
            <tr><td>所在街道</td><td>{{dataDetail.street}}</td></tr>
            <tr><td>所在社区</td><td>{{dataDetail.community}}</td></tr>
            <tr><td>立案条件</td><td>{{dataDetail.acceptcasecondition}}</td></tr>
            <tr><td>是否立案</td><td>{{dataDetail.sfla}}</td></tr>
            <tr><td>受理内容</td><td>{{dataDetail.bjcontent}}</td></tr>
            <tr><td>受理方式</td><td>{{dataDetail.acceptmode}}</td></tr>
            <tr><td>核查内容</td><td>{{dataDetail.checkContent}}</td></tr>
            <tr><td>结案人</td><td>{{dataDetail.closeSignname}}</td></tr>
            <tr><td>结案人签字时间</td><td>{{dataDetail.closeSigndate}}</td></tr>
          </table>
        </el-col>
        <el-col :span="11">
          <table class="myTable">
            <tr>
              <td class="narrowTd">上<br/>报<br/>图<br/>片</td>
              <td class="picTd">
                <img v-for="pic in photoDetail.reportAttachments" class="myPic" v-bind:key="pic.fjName" :src="pic.picPath"/>
              </td>
            </tr>
            <tr>
              <td class="narrowTd">处<br/>理<br/>图<br/>片</td>
              <td class="picTd">
                <img v-for="pic in photoDetail.dealAttachments" class="myPic"  v-bind:key="pic.fjName" :src="pic.picPath"/>
              </td>
            </tr>
          </table>

        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
  import echarts from 'echarts'
  function getChartOneOption(xAxisLabel,series1) {
    return {
      tooltip: {
        trigger: 'axis',
      },
      color:['#3AA0FF'],
      xAxis: [
        {
          show:false,
          type: 'category',
          data: xAxisLabel,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            fontSize : 18
          }
        }
      ],
      yAxis: [
        {
          show:false,
          type: 'value',
          nameTextStyle:{  fontSize : 18},
          min: 0,
          /*      max: 250,
                interval: 50,*/
          axisLabel: {
            formatter: '{value}条',
            fontSize : 18
          }

        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '40%',
          data: series1
        }
      ]
    }
  }
  export default {
    name: "eventChart",

    data: function() {
      return {
        lawData:{},
        lawTable:[],
        dataDetail:{},
        photoDetail:{},
        matterData:{},
        matterTable:[],
        dialogTableVisible:false,
        law1Num:0,
        law2Num:0,
      }
    },
    methods: {
      snake:function(){

      },
      getLawData: function () {
        let vm = this;
        this.$http.get("/yczmq/bigScreen/analysis/zfsxView").then(resp=>{
          if (resp.status == 0) {
            vm.lawData = resp.data;
          }
        })
      },
      repeat:function(list, key){
        list.push(list.shift());
        this[key] = list.slice(0,5);
      },
      queryLaw: function (pageNo) {
        let vm = this;
        let data = {
          curPageNO: pageNo,
          pageSize: 10,
          startTime: "",
          keyword:vm.keyword,
          endTime: ""
        }
        this.$http.post("/yczmq/bigScreen/supervisionWork/page", window.changeDataType(data)).then(resp => {
          if (resp.status == 0) {
            var list = resp.data.data;
            vm.repeat(list,'lawTable');
            setInterval(()=>vm.repeat(list,'lawTable'),5000);
          }
        })
      },
      showDetail:function(item){
        let vm = this;
        vm.dataDetail = {};
        vm.photoDetail = {};
        this.$http.get("/yczmq/bigScreen/supervisionWork/get/"+item.id).then(resp => {
          if (resp.status == 0) {
            vm.dataDetail = resp.data;
          }
        })
        this.$http.get("/yczmq/bigScreen/supervisionWork/attachments/"+item.gdbh).then(resp => {
          if (resp.status == 0) {
            vm.photoDetail = resp.data;
          }
        })
        vm.dialogTableVisible = true;
      },
      getMatterData: function () {
        let vm = this;
        this.$http.get("/yczmq/bigScreen/analysis/blsxView").then(resp=>{
          if (resp.status == 0) {
            vm.matterData = resp.data;
          }
        })
      },
      queryMatter: function (pageNo) {
        let vm = this;
        let data = {
          curPageNO: pageNo,
          pageSize: 10,
          keyword: vm.keyword,
          startTime: "",
          endTime: ""
        }
        this.$http.post("/yczmq/bigScreen/process/page", window.changeDataType(data)).then(resp => {
          if (resp.status == 0) {
            var list = resp.data.data;
            vm.repeat(list,'matterTable');
            setInterval(()=>vm.repeat(list,'matterTable'),5000);
          }
        })
      },
      drawChart1(data){
        this.law1Num = data.totalNum;
        let list = data.groupList;
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById("chart1"));
        let xAxisLabel = list.map(n=>n.itemType);
        let series1 =list.map(n=>n.num);
        myChart.setOption(getChartOneOption(xAxisLabel,series1));
      },
      drawChart2(data){
        this.law2Num = data.totalNum;
        let list = data.groupList;
        let myChart = echarts.init(document.getElementById("chart2"));
        let xAxisLabel = list.map(n=>n.itemType);
        let series1 =list.map(n=>n.num);
        myChart.setOption(getChartOneOption(xAxisLabel,series1));
      },
      getChartOneData(){
        this.$http.get("/yczmq/bigScreen/analysis/zhzfjView").then(resp=>{
          if (resp.status == 0 ) {
            this.drawChart1(resp.data);
          }
        })
      },
      getChartTwoData(){
        this.$http.get("/yczmq/bigScreen/analysis/scjdjView").then(resp=>{
          if (resp.status == 0 ) {
            this.drawChart2(resp.data);
          }
        })
      }
    },
    created(){
      this.getLawData();
      this.getMatterData();
      this.queryLaw(1);
      this.queryMatter(1);
      this.getChartOneData();
      this.getChartTwoData();
    }
  }
</script>

<style scoped>
  .subTitle{
    padding-left: 38px;
    font-size:24px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:90px;
    height:90px;
    background:rgba(255,255,255,1);
    border-bottom: 1px solid lightgrey;
  }
  .btnText{
    float: right;
    margin-right: 36px;
    margin-top: 26px;
    font-size:20px;
    line-height:36px;
  }
</style>